<script setup lang="ts">
const route = useRoute()
const appConfig = useAppConfig()

const links = [{
    id: 'home',
    label: 'Home',
    icon: 'i-heroicons-home',
    to: '/',
    tooltip: {
        text: 'Home',
    }
}, {
    id: 'table',
    label: 'table',
    icon: 'i-heroicons-inbox',
    to: '/table',
    badge: '4',
    tooltip: {
        text: 'table',
        // shortcuts: ['G', 'I']
    }
}]
const items = [[{
    label: 'logout',
    icon: 'i-heroicons-paper-airplane',
    to: '/inbox'
}, {
    label: 'New user',
    icon: 'i-heroicons-user-plus',
    to: '/users'
}]]


</script>

<template>
    <UDashboardLayout>
        <UDashboardPanel :width="250" class=" bg-zinc-600" :resizable="{ min: 200, max: 300 }" collapsible>
            <UDashboardSidebar>
                <UDashboardSidebarLinks class=" text-white !h-20 text-2xl" :links="links" />
            </UDashboardSidebar>
        </UDashboardPanel>
        <UDashboardPanel grow>
            <UDashboardNavbar :ui="{ left: 'flex-1' }">
                <template #left>
                    Dashboard
                </template>
                <template #right>
                    <UDropdown :items="items" class="text-blue-300">
                        <UButton icon="i-heroicons-plus" size="md" class="ml-1.5 rounded-full" />
                    </UDropdown>
                </template>

            </UDashboardNavbar>
            <UDashboardPanelContent class="bg-slate-50">
                <slot />
            </UDashboardPanelContent>
        </UDashboardPanel>
    </UDashboardLayout>
</template>